<template>
  <div>
    <span class="line"> <h1>行程中心</h1><span class="text">&nbsp;<el-button @click="open()">快捷查看行程与退票</el-button></span></span>
    <el-calendar>
      <template
        v-slot:dateCell="{date, data}">
        <!--          {{data}}
          { "isSelected": true, "type": "current-month", "day": "2022-07-07" }
                    {{date}}
          Wed Jul 20 2022 08:00:00 GMT+0800 (中国标准时间)-->
        <div :class="data.isSelected ? 'is-selected' : 'no-selected'">
          <!--          刷新日期数据-->
          {{ data.day.split('-').slice(1).join('-') }}
          <div style="width:100%;" v-for="item in scheduleData">
            <!--根据什么来显示-->
            <div v-show="data.day == item.startDateTime &&  item.startDateTime >= myDate">
              <!--   显示行程-->
              <el-tag type="success" >
                {{ item.startCity }}--{{item.endCity }}
              </el-tag>
<!--              这里详细信息内的内容只能显示最后一个被for渲染的数据-->
              <!--          对话框-->
                <el-dialog title="详细信息" :visible.sync="dialogTableVisible" :modal-append-to-body='false'>
                  <template>
                    <el-table
                      :data="scheduleData"
                      stripe
                      style="width:100%">
                      <el-table-column
                        prop="startCity"
                        label="出发地"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="endCity"
                        label="目的地"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="startDateTime"
                        label="出发日期"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="endDateTime"
                        label="抵达日期"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="startAirport"
                        label="出发机场"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="endAirport"
                        label="抵达机场"
                        width="180">
                      </el-table-column>

                      <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                          <el-button @click="handleClick(scope.row)" type="primary" round>退票</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-dialog>
            </div>

          </div>

        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import order from '../api/order'
import moment from "moment";

export default {
  name: "MyOrder",
  data() {
    return {
      dialogTableVisible: false,
      value: new Date(),
      scheduleData: {},
    }
  },
  created() {
    this.init()
  }, computed: {
    myDate() {
      return moment(new Date()).format('yyyy-MM-DD')
    }
  },
  methods: {
    init() {
      order.getMyOrder()
        .then(response => {
          let orderList = response.data.data.orderList
          this.scheduleData = orderList
          for(let i=0; this.scheduleData.length;i++){
            this.scheduleData[i].type="退款"
          }
        })
    },

    handleClick(row) {
      console.log(row);
      order.paymentOrRefund(row)
        .then(response=>{
          location.reload();
          this.$message({
            message: '退款成功',
            type: 'success'
          });
        })
    },
    open(){
      this.dialogTableVisible = true
      console.log("打开了对话框")
    }
  }
}
</script>

<style scoped>
.colum-date{
  font-size: large;
}
.line {
  display: flex;
  align-items: baseline;
}

.text {
  color: #2a88d8;
}

.el-calendar {
  background-color: #d5ebe1;
  height: 100%;
}

.el-calendar >>> .el-calendar__title {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: large;
  font-weight: bolder;
  color: #fff;
  /*居中显示*/
  margin: 0px auto;
  border: 1px #2a88d8 solid;
  background-color: #2a88d8;
  border-radius: 10px;
}

.no-selected {
  width: 100%;
  height: 100%;

}

.is-selected {
  background: #b1d5c8;
  width: 100%;
  color: #ebf6f7;
  height: 100%;
}
/*这里有个样式的bug，不过看起来也挺美观 并不需要修改具体如下：

  .el-calendar >>> .el-calendar-table td
  .el-calendar >>> .el-calendar-table th
  会同时控制<el-dialog></<el-dialog>的内容  这是什么原因？
  */
/*表格内单元*/
.el-calendar >>> .el-calendar-table td {
  color: #4994c4;
  border: 2px #fff solid;
  text-align: center;
  font-size: x-large;
  font-weight: bolder;

}

/*表格头*/
.el-calendar >>> .el-calendar-table th {
  text-align: center;
  border: 3px #fff solid;
  color: #fff;
  font-size: large;
  font-weight: bolder;
  background-color: #87c0ca;
}
.el-calendar{
  height: 100%;
}
.el-calendar:hover {

  box-shadow: 0 2px 4px rgba(0, 0, 0, .32), 0 0 6px rgba(0, 0, 0, .1)
}

.el-tag {
  width: 100%;
}

.is-selected {
  color: #1989FA;
}
</style>

